<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="msg">
    <br>
    用户名： <input type="text" v-model="username">
    <!-- 获取多个值 保存到对象中 -->
    密码：<input type="text" v-model="userInfo.password">
    <br>
    手机号<input type="text" v-model="userInfo.phone">
    <br>
    性别：<input type="text" v-model="userInfo.sex">
    <br>
    <h1 v-if="userInfo.ischeck">显示隐藏提示</h1>
    <input type="checkbox" v-model="userInfo.ischeck">
    <h1>{{msg}}</h1>
    <select v-model="sel" @change="getval">
      <option value="美女">美女</option>
      <option value="富婆">富婆</option>
      <option value="老伴">老伴</option>
    </select>
    <h1>{{sel}}</h1>
    <button @click="getparams">获取用户名</button>
  </div>
  <!-- 视图层 view -->
  <div id="box">

  </div>
  <script src="./vue.js"></script>
  <script>
    // v-model  数据双向绑定  底层原理Object.defineProprety()实现
    // Object.defineProprety(obj, {
    //   get() { //改变数据}
    //     set() { //劫持数据}
    //     })
    //v-model  为表单元素提供 input  select   textarea
    // mvvm 软件设计模式
    // model 数据模型层
    //view 视图层
    //viewModel 视图模型层

    //mvc  model 数据模型层   view 视图层  controller 控制层
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "你好1111",
          username: "",
          userInfo: {
            password: "",
            phone: "",
            sex: "",
            ischeck: ""
          },
          sel: ""
        }
      },
      methods: {
        getparams() {
          console.log(this.username)
          console.log(this.userInfo)
        },
        getval() {
          console.log(this.sel)
        }
      },
    })
    // 数据层 model
    var myname = "张三" //数据层
    // 控制层 controller
    var box = document.getElementById("box")
    box.innerHTML = myname;


    // 7: 25
    // 9: 00

  </script>
</body>

</html>